<template>
    <div>
        <div class="search-block">
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item label="机构名称">
                    <el-input v-model="search.key" placeholder="机构名称"></el-input>
                </el-form-item>
                <el-form-item label="机构类型">
                    <el-select v-model="search.role" filterable remote reserve-keyword placeholder="选择机构类型">
                        <el-option v-for="(desc,code) in company_roles" :key="code" :label="desc" :value="code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="init" size="small">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="option_block">
            <el-row>
                <el-link :underline="false" class="el-button el-button--success" href="/#/company/add"><i class="el-icon-circle-plus-outline"></i> 添加</el-link>
                <el-button type="warning" icon="el-icon-edit" @click="toEdit">修改</el-button>
                <el-button type="success" @click="toDepartment" plain>
                    <icon-svg icon="bumen"/>
                    部门管理
                </el-button>
                <el-button type="danger" @click="manageInvoice" plain>
                    <icon-svg icon="fapiao"/>
                    开票信息管理
                </el-button>
                <el-button type="warning" @click="toUserPage(1)" plain>
                    <icon-svg icon="guanliyuan"/>
                    管理员管理
                </el-button>
                <el-button type="primary" @click="toUserPage(0)" plain>
                    <icon-svg icon="yonghu"/>
                    会员管理
                </el-button>
                <el-button type="warning" v-if="selectedRow && selectedRow.deleted_at" icon="el-icon-refresh" @click="multeDelete">恢复</el-button>
                <el-button type="danger" v-else icon="el-icon-delete" @click="multeDelete">禁用</el-button>
            </el-row>
        </div>
        <div class="content">
            <el-table :data="list" v-loading="search.loading" id="form" ref="singleTable" highlight-current-row @current-change="handleRowChange" height="618">
                <el-table-column prop="id" label="编号" width="66"></el-table-column>
                <el-table-column prop="shortName" label="机构简称" width="158"></el-table-column>
                <el-table-column prop="name" label="机构名称"></el-table-column>
                <el-table-column label="机构类型" width="118">
                    <template slot-scope="scope">{{ handleType(scope.row.role) }}</template>
                </el-table-column>
                <el-table-column label="机构类别" width="118">
                    <template slot-scope="scope">{{ company_types[scope.row.companyType] }}</template>
                </el-table-column>
                <el-table-column prop="register_no" label="税号"></el-table-column>
                <el-table-column prop="build_at" label="成立时间" width="118"></el-table-column>
                <el-table-column label="状态" width="70">
                    <template slot-scope="scope">
                        <icon-svg :icon="scope.row.deleted_at ? 'close1' : 'open_icon_successx'"></icon-svg>
                    </template>
                </el-table-column>
                <el-table-column prop="regions" label="机构地址" width="118">
                    <template slot-scope="scope">
                        <el-link :underline="false" :title="scope.row.regions + ' ' + scope.row.address">{{ scope.row.regions }} {{ scope.row.address }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width='170'></el-table-column>
            </el-table>
            <div class="pager-block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.page" :page-sizes="[10, 20, 30, 50,100]"
                               :page-size="search.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="search.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog :title="(selectedRow ? selectedRow.name : '-')+' 开票信息'" :visible.sync="invoiceVisible" :close-on-click-modal="false" width="35%">
            <template v-if="addInvoiceVisible">
                <el-form ref="form" :model="form" :rules="form.type == 2 ? rules : base_rules" label-width="110px">
                    <el-form-item label="发票抬头" prop="header_title">
                        <el-input v-model="form.header_title" placeholder="请输入发票抬头" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发票类型" prop="type">
                        <el-radio-group v-model="form.type" size="mini">
                            <el-radio-button label="1">企业增值税普通发票</el-radio-button>
                            <el-radio-button label="2">增值税专用发票</el-radio-button>
                            <el-radio-button label="3">电子发票</el-radio-button>
                            <el-radio-button label="4">组织（非企业）增值税普通发票</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="税务登记证号" prop="register_no">
                        <el-input v-model="form.register_no" placeholder="请输入税务登记证号" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开户银行名称" prop="bank_name">
                        <el-input v-model="form.bank_name" placeholder="请输入开户银行名称" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="基本开户账号" prop="bank_no">
                        <el-input v-model="form.bank_no" placeholder="请输入基本开户账号" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="注册场所地址" prop="register_address">
                        <el-input v-model="form.register_address" placeholder="请输入注册场所地址" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="注册固定电话" prop="register_phone">
                        <el-input v-model="form.register_phone" placeholder="请输入注册固定电话" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <template v-else-if="invoice">
                <el-card class="box-card" shadow="always">
                    <div slot="header" class="clearfix">
                        <span><i class="el-icon-tickets"></i> {{ handleInvoiceType(invoice.type) }}</span>
                        <el-button style="float: right; padding: 3px 0" type="text" @click="showUpdateInvoice">更新</el-button>
                    </div>
                    <div class="invoice_info">发票抬头：<font>{{ invoice.header_title }}</font></div>
                    <div class="invoice_info">税务登记证号：<font>{{ invoice.register_no }}</font></div>
                    <template v-if="invoice.type == 2">
                        <div class="invoice_info">开户银行名称：<font>{{ invoice.bank_name }}</font></div>
                        <div class="invoice_info">基本开户账号：<font>{{ invoice.bank_no }}</font></div>
                        <div class="invoice_info">注册场所地址：<font>{{ invoice.register_address }}</font></div>
                        <div class="invoice_info">注册固定电话：<font>{{ invoice.register_phone }}</font></div>
                    </template>
                </el-card>
            </template>
            <template v-else>
                <a class="empty_invoice" @click="addInvoiceVisible = true">
                    <div tabindex="0" class="el-upload el-upload--text empty_invoice">
                        <div class="el-upload-dragger">
                            <i class="el-icon-plus"></i>
                            <div class="el-upload__text">还没有开票信息，<em>立即添加</em></div>
                        </div>
                    </div>
                </a>
            </template>
            <div slot="footer" class="dialog-footer">
                <template v-if="addInvoiceVisible">
                    <el-button @click="addInvoiceVisible = false">返回</el-button>
                    <el-button type="primary" @click="saveInvoice">添 加</el-button>
                </template>
                <template v-else>
                    <el-button @click="invoiceVisible = false">关 闭</el-button>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                search: {page: 1, pageSize: 10, total: 0, loading: false},
                customer_types: [],
                list: [],
                company_roles: [],
                supplier_types: [],
                company_types: [],
                selectedRow: null, //当前选中列
                invoice: null,
                invoiceVisible: false,
                addInvoiceVisible: false,
                form: {type: 1,},
                base_rules: {
                    header_title: [{required: true, message: '请输入发票抬头', trigger: 'blur'}],
                    type: [{required: true, message: '请选择发票类型', trigger: 'change'}],
                    register_no: [{required: true, message: '请输入税务登记证号', trigger: 'blur'}],
                },
                rules: {
                    header_title: [{required: true, message: '请输入发票抬头', trigger: 'blur'}],
                    type: [{required: true, message: '请选择发票类型', trigger: 'change'}],
                    register_no: [{required: true, message: '请输入税务登记证号', trigger: 'blur'}],
                    bank_name: [{required: true, message: '请输入开户银行名称', trigger: 'blur'}],
                    bank_no: [{required: true, message: '请输入基本开户账号', trigger: 'blur'}],
                    register_address: [{required: true, message: '请输入注册场所地址', trigger: 'blur'}],
                    register_phone: [{required: true, message: '请输入注册固定电话', trigger: 'blur'}],
                },
            }
        },
        mounted() {
            this.init();
            this.loadConfig();
        },
        methods: {
            loadConfig() {
                const _this = this;
                axios.get(basePath + '/company/config').then(function (res) {
                    if (res.success) {
                        _this.company_roles = res.data.company_roles;
                        _this.supplier_types = res.data.supplier_types;
                        _this.company_types = res.data.company_types;
                    }
                });
            },
            openFeeDialog() {
                if (this.selectedRow) {
                    const _this = this;
                    axios.get(basePath + '/company/info/' + this.selectedRow.id).then(function (res) {
                        if (res.success) {
                            _this.fee = res.data;
                            _this.feeVisible = true;
                        }
                    });
                } else {
                    this.$alert("请选择要更新的机构");
                }
            },
            showUpdateInvoice() {
                const _this = this;
                axios.post(basePath + '/company/invoiceInfo/' + this.selectedRow.id).then(function (res) {
                    if (res.success) {
                        _this.form = res.data;
                        _this.addInvoiceVisible = true;
                    } else {
                        _this.$alert(res.msg);
                    }
                });
            },
            saveInvoice() {
                if (this.form.id) {
                    this.$confirm("确定修改开票信息吗?").then(this.doSaveInvoice);
                } else {
                    this.doSaveInvoice();
                }
            },
            doSaveInvoice() {
                const _this = this;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        _this.form.company_id = _this.selectedRow.id;
                        axios.post(basePath + '/company/addInvoice', _this.form).then(function (res) {
                            _this.$message({
                                message: res.msg,
                                type: (res.success ? 'success' : 'error')
                            });
                            if (res.success) {
                                //添加成功
                                _this.manageInvoice();
                                _this.addInvoiceVisible = false;
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            manageInvoice() {
                if (this.selectedRow) {
                    const _this = this;
                    axios.post(basePath + '/company/invoiceInfo/' + this.selectedRow.id).then(function (res) {
                        if (res.success) {
                            _this.invoice = res.data;
                            _this.invoiceVisible = true;
                        } else {
                            _this.$alert(res.msg);
                        }
                    });
                } else {
                    this.$message.error("请选择要更新的机构");
                }
            },
            handleRowChange(val) {
                this.selectedRow = val;
            },
            handleType(type) {
                switch (type) {
                    case 1:
                        return '客户机构';
                        break;
                    case 2:
                        return '分单机构';
                        break;
                    case 3:
                        return '伙伴机构';
                        break;
                    case 4:
                        return '供应商';
                        break;
                    default:
                        return '其他';
                        break;
                }
            },
            handleSizeChange(val) {
                this.search.pageSize = val
                this.search.page = 1
                this.init()
            },
            toEdit() {
                if (this.selectedRow) {
                    this.$router.push('/company/add?id=' + this.selectedRow.id);
                } else {
                    this.$message.error("请选择要更新的机构");
                }
            },
            toUserPage(type) {
                let route = type == 1 ? 'admins' : 'users';
                if (this.selectedRow) {
                    this.$router.push('/company/' + route + '?company_id=' + this.selectedRow.id);
                } else {
                    this.$message.error("请选择机构");
                }
            },
            toDepartment() {
                if (this.selectedRow) {
                    this.$router.push('/company/department?id=' + this.selectedRow.id);
                } else {
                    this.$message.error("请选择机构");
                }
            },
            handleCurrentChange(val) {
                this.search.page = val
                this.init()
            },
            handleInvoiceType(type) {
                if (type == 1) {
                    return '企业增值税普通发票';
                } else if (type == 2) {
                    return "增值税专用发票";
                } else if (type == 3) {
                    return "电子发票";
                } else {
                    return "组织（非企业）增值税普通发票";
                }
            },
            init() {
                const _this = this
                _this.search.loading = true
                _this.loadList(function (res) {
                    _this.list = res.data
                    _this.search.page = res.page
                    _this.search.total = res.total
                    _this.search.loading = false
                })
            },
            loadList(func) {
                axios.post(basePath + '/company/list', this.search).then(func)
            },
            multeDelete() {
                const _this = this
                if (_this.selectedRow) {
                    _this.$confirm('确定要' + (_this.selectedRow.deleted_at ? '恢复' : '禁用') + '选中的机构吗?', '').then(function () {
                        axios.post(basePath + '/company/delete', {
                            id: _this.selectedRow.id
                        })
                            .then(function (res) {
                                _this.$message({
                                    message: res.msg,
                                    type: res.success ? 'success' : 'error'
                                })
                                if (res.success) {
                                    _this.search.loading = true
                                    _this.init()
                                }
                            })
                    })
                } else {
                    _this.$message.error('请选择要禁用的机构');
                }
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .main_content {
        .el-table .el-link {
            width: 100px;
            height: 25px;
            line-height: 25px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            font-size: 12px;
        }

        .empty_invoice {
            display: block;

            .el-upload-dragger {
                margin: 0 auto;
            }
        }

        .invoice_info {
            line-height: 25px;
        }

        .el-upload-dragger .el-icon-plus {
            font-size: 28px;
            color: #8c939d;
            margin: 40px 0 16px;
            line-height: 50px;
        }

        .company_info {
            padding: 0;
            margin: 0;

            li {
                color: #888;
                line-height: 30px;

                font {
                    color: #333;
                }
            }

            .el-form {
                padding-top: 20px;
                margin-top: 20px;
                border-top: 1px solid #ccc;
            }
        }
    }
</style>
